<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./../Resources/plugins/layui/dist/css/layui.css">
    <link rel="stylesheet" href="./../Resources/css/common.css">
    <link rel="stylesheet" href="./../Resources/css/foot.css">
    <link rel="stylesheet" href="./../Resources/css/goods-details.css">
</head>

<body class="layui-form">
    <div class="layui-header ws-header">
        <div class="layui-container">
            <div class="ws-logo">
                <a class="logo" href="/">
                    <img src="./../Resources/img/logo.png" alt="layui">
                </a>
            </div>
        </div>
    </div>
    <div class="container" style="overflow: hidden;">
        <div class="goods-details-header">
            <div class="goods-details-header-warp">
                <div class="goods-details-header-back">
                    <a class="goods-details-header-back-icon goods-details-header-bg" href="javascript:history.back()">
                        <i class="layui-icon layui-icon-left"></i>
                    </a>
                </div>
                <div class="goods-details-header-content">
                    <!-- <div class="goods-details-header-content-scroll">
                        <div class="goods-details-header-content-nav">
                            <a class="goods-details-header-content-nav-item goods-details-header-content-nav-item-active" href="#goods-details-content">商品</a>
                            <a class="goods-details-header-content-nav-item" href="#goods-nav-container">详情</a>
                        </div>
                    </div> -->
                </div>
                <div class="goods-details-header-right">
                    <!-- <div class="goods-details-header-right-icon goods-details-header-bg">
                        <i class="layui-icon layui-icon-face-smile-fine"></i>
                    </div>
                    <div class="goods-details-header-right-icon goods-details-header-bg">
                        <i class="layui-icon layui-icon-face-smile-fine"></i>
                    </div>
                    <div class="next-popover-container" style="display: none;">
                        <div class="next-popover-warp">
                            <div class="next-popover-warp-item">
                                <div class="next-popover-warp-item-icon"><span></span>
                                </div>
                                <div class="next-popover-warp-item-text">首页</div>
                            </div>
                            <div class="next-popover-warp-item">
                                <div class="next-popover-warp-item-icon"><span></span>
                                </div>
                                <div class="next-popover-warp-item-text">购物车</div>
                            </div>
                            <div class="next-popover-warp-item">
                                <div class="next-popover-warp-item-icon"><span></span>
                                </div>
                                <div class="next-popover-warp-item-text">我的收藏</div>
                            </div>
                        </div>
                    </div> -->
                </div>
            </div>
        </div>

        <div class="goods-details-content" id="goods-details-content">
            <div class="goods-details-content-item">
                <div class="next-goods-swiper-container">
                    <div class="layui-carousel" id="carousel-goods-swiper-list">
                        <div carousel-item>
                            <div><img
                                    src="https://img0.baidu.com/it/u=3859424867,4176745764&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="next-goods-title-container">
                    <div class="next-goods-title-hot">
                        <div class="next-goods-title-price">
                            <span>
                                <div class="next-goods-title-price-symbol"><span>￥</span></div>
                                6799.00
                            </span>
                            <div class="next-goods-title-price-del"><span>￥7999.00</span></div>
                        </div>
                        <div class="next-goods-title-hot-time">
                            <div class="next-goods-title-hot-time-title">
                                <div class="next-goods-title-hot-time-title-icon">
                                    <i class="layui-icon layui-icon-rate"></i>
                                    <i class="layui-icon layui-icon-rate-solid"></i>
                                </div>
                                点击收藏
                            </div>
                        </div>
                    </div>
                    <div class="next-goods-title">
                        <div class="next-goods-title-box">
                            <div class="next-goods-title-box-hot"><span>XA00252325-1</span></div>
                            <div class="next-goods-title-box-title">
                                <span>最引人注目的是他的胡须——浓密极了，而且极像浓墨写的隶体“一”字。他习惯穿长衫，手里时常拿着一支安烟。</span>
                            </div>
                        </div>
                        <div class="next-goods-title-desc">
                            当有人说了可笑的话，他就会发出发自内心的笑声，爽朗的笑声常常使他咳嗽不止。也许，我只能怀着诚惶诚恐的心情来写一些轻薄的文字了。</div>
                    </div>
                </div>
            </div>
            <div class="next-cell-sku-container">
                <div class="next-cell-sku-warp-content">
                    <div class="next-cell-sku-warp-content-item">
                        <div class="next-cell-sku-warp-content-item-title">
                            <div><span>颜色</span></div>
                        </div>
                        <div class="next-cell-sku-warp-content-item-chil">
                            <div
                                class="next-cell-sku-warp-content-item-chil-text">
                                <div class="next-cell-sku-warp-content-item-chil-text-box">
                                    <div class="next-cell-sku-warp-content-item-chil-text-box-msg"><span>黑色</span></div>
                                </div>
                            </div>
                            <div
                                class="next-cell-sku-warp-content-item-chil-text next-cell-sku-warp-content-item-chil-active">
                                <div class="next-cell-sku-warp-content-item-chil-text-box">
                                    <div class="next-cell-sku-warp-content-item-chil-text-box-msg"><span>白色</span></div>
                                </div>
                            </div>
                            <div
                                class="next-cell-sku-warp-content-item-chil-text">
                                <div class="next-cell-sku-warp-content-item-chil-text-box">
                                    <div class="next-cell-sku-warp-content-item-chil-text-box-msg"><span>远山蓝</span>
                                    </div>
                                </div>
                            </div>
                            <div
                                class="next-cell-sku-warp-content-item-chil-text">
                                <div class="next-cell-sku-warp-content-item-chil-text-box">
                                    <div class="next-cell-sku-warp-content-item-chil-text-box-msg"><span>旷野绿</span>
                                    </div>
                                </div>
                            </div>
                            <div class="next-cell-sku-warp-content-item-chil-text">
                                <div class="next-cell-sku-warp-content-item-chil-text-box">
                                    <div class="next-cell-sku-warp-content-item-chil-text-box-msg"><span>流光紫</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="next-cell-sku-warp-content-item">
                        <div class="next-cell-sku-warp-content-item-title">
                            <div><span>内存</span></div>
                        </div>
                        <div class="next-cell-sku-warp-content-item-chil">
                            <div
                                class="next-cell-sku-warp-content-item-chil-text next-cell-sku-warp-content-item-chil-disabled">
                                
                                <div class="next-cell-sku-warp-content-item-chil-text-box">
                                    <div class="next-cell-sku-warp-content-item-chil-text-box-msg"><span>8+128G</span>
                                    </div>
                                </div>
                            </div>
                            <div
                                class="next-cell-sku-warp-content-item-chil-text next-cell-sku-warp-content-item-chil-active">
                                
                                <div class="next-cell-sku-warp-content-item-chil-text-box">
                                    <div class="next-cell-sku-warp-content-item-chil-text-box-msg"><span>12+256G</span>
                                    </div>
                                </div>
                            </div>
                            <div
                                class="next-cell-sku-warp-content-item-chil-text next-cell-sku-warp-content-item-chil-disabled">
                                
                                <div class="next-cell-sku-warp-content-item-chil-text-box">
                                    <div class="next-cell-sku-warp-content-item-chil-text-box-msg"><span>8+256G</span>
                                    </div>
                                </div>
                            </div>
                            <div
                                class="next-cell-sku-warp-content-item-chil-text next-cell-sku-warp-content-item-chil-disabled">
                                
                                <div class="next-cell-sku-warp-content-item-chil-text-box">
                                    <div class="next-cell-sku-warp-content-item-chil-text-box-msg"><span>12+512G</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="next-cell-sku-warp-content-price">
                        <div class="next-cell-sku-warp-content-price-text">
                            <div><span>数量</span></div>
                            <div class="next-cell-sku-warp-content-price-text-limit"><span> 30 件
                                </span></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="goods-details-content-item">
                <div class="goods-details-content-item-rich">
                    <div class="goods-details-content-item-rich-warp">
                        <div class="goods-details-content-item-rich-warp-title"> 商品介绍 </div>
                        <div class="goods-details-mp-html">
                            <span
                                style="padding: 0.625rem; display: inline-block; text-indent: 2em; line-height: 26px; font-size: 0.8125rem;">四季之中，我最喜欢秋天。看哪，清清爽爽的秋风，不紧不慢地刮着，一缕，两缕，化作千丝万缕，亲吻着过路行人，抚慰着人们心田
                                ；淅淅沥沥的秋雨，不急不缓地下着，一滴，两滴，连成千丝万线，消融着酷暑的热浪，为夏天挂上一道幕帘
                                ；疏疏密密的落叶，不慌不忙地飘着，一片，两片，牵成千串万串，落到澄碧的水中，泊成枫桥边的小船；最迷人的是独立枝头的红柿呀，一只，两只，多到成千上万，吊在村落上空，映红了山里人家，成为秋的路标，秋的诗眼
                                。</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="next-goods-nav-container" id="goods-nav-container">
            <div class="next-goods-nav-warp">
                <!-- <div class="next-goods-nav-warp-left">
                    <div class="next-goods-nav-warp-left-item">
                        <div class="next-goods-nav-warp-left-item-icon"><i class="layui-icon layui-icon-login-qq"></i>
                        </div>
                        <div class="next-goods-nav-warp-left-item-text">客服</div>
                    </div>
                    <div class="next-goods-nav-warp-left-item">
                        <div class="next-goods-nav-warp-left-item-icon"><i class="layui-icon layui-icon-set-sm"></i>
                        </div>
                        <div class="next-goods-nav-warp-left-item-text">店铺</div>
                        <div class="next-goods-nav-warp-left-item-dot">
                            <div class="next-goods-nav-warp-left-item-dot-text" style="background-color: red;">
                                <span>7</span>
                            </div>
                        </div>
                    </div>
                    <div class="next-goods-nav-warp-left-item">
                        <div class="next-goods-nav-warp-left-item-icon"><i class="layui-icon layui-icon-cart"></i></div>
                        <div class="next-goods-nav-warp-left-item-text">购物车</div>
                        <div class="next-goods-nav-warp-left-item-dot">
                            <div class="next-goods-nav-warp-left-item-dot-text" style="background-color: red;">
                                <span>16</span>
                            </div>
                        </div>
                    </div>
                </div> -->
                <div class="next-goods-nav-warp-right">
                    <div class="next-goods-nav-warp-right-item">
                        <div class="next-goods-nav-warp-right-item-btn next-goods-nav-warp-right-item-btn-left"
                            style="background: linear-gradient(90deg, rgb(255, 205, 30), rgb(255, 138, 24));">加入购物车
                        </div>
                    </div>
                    <div class="next-goods-nav-warp-right-item">
                        <div class="next-goods-nav-warp-right-item-btn next-goods-nav-warp-right-item-btn-right">立即提交
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-footer footer-menu clearfix">
        <div class="tabbar">
            <a href="lipinlist.html" class="tabbar-bd select">
                <i class="layui-icon layui-icon-gift"></i>
                <div class="icon-name">礼品</div>
            </a>
        </div>
        <div class="tabbar">
            <a href="#" class="tabbar-bd">
                <i class="layui-icon layui-icon-video"></i>
                <div class="icon-name">视频</div>
            </a>
        </div>
        <div class="tabbar">
            <a href="#" class="tabbar-bd">
                <i class="layui-icon layui-icon-cart"></i>
                <div class="icon-name">购物车</div>
                <div class="tabbar-reddot tabbar-badge">24</div>
            </a>
        </div>
        <div class="tabbar">
            <a href="myusercenter.html" class="tabbar-bd">
                <i class="layui-icon layui-icon-username"></i>
                <div class="icon-name">我的</div>
            </a>
        </div>
    </div>

    <script src="./../Resources/plugins/layui/dist/layui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        layui.use(function () {
            var carousel = layui.carousel;

            // 渲染 - 设置时间间隔、动画类型、宽高度等属性
            carousel.render({
                elem: '#carousel-goods-swiper-list',
                interval: 5000,
                anim: 'fade',
                width: '100%',
                height: '360px',
                indicator: 'none'
            });
        });
    </script>
    <script>
        $(document).ready(function () {
            // 初始化设置.goods-details-content的高度
            $(".goods-details-content").height($(window).height() - 170);

            // 监听窗口大小变动事件
            $(window).resize(function () {
                // 设置.goods-details-content的高度为窗口高度
                $(".goods-details-content").height($(window).height() - 170);
            });
        });
    </script>
</body>

</html>